var linewidth = 100;
var linecap = 'butt';
var color = 'black';
var scroll = 5 / 192;
//pen
var flag = false;
var pen_name = '钢笔'

window.onload = function () {
    Progress();
    setColor();
    choicePen();
    Draw();
}

//在画布上画东西
function Draw() {
    var oContainer = document.getElementById('container');
    var oLeft = document.getElementById('left');
    /**@type {HTMLCanvasElement}*/
    var oCanvas = document.getElementById('canvas');

    if (oCanvas.getContext) {
        var ctx = oCanvas.getContext('2d');

        oCanvas.onmousedown = function (ev) {

            var ev = ev || window.event;
            var posx = ev.clientX - oCanvas.offsetLeft;
            var posy = ev.clientY - oCanvas.offsetTop;

            if (flag) {//flag为true启用橡皮擦
                //给橡皮檫显示范围
                // var oEraser_div=document.createElement('div');
                // document.oCanvas.appendChild(oEraser_div);
                // oEraser_div.style.left=posx-oEraser_div.offsetWidth/2+'px';
                // oEraser_div.style.top=posy-oEraser_div.offsetHeight/2+'px';
                // oEraser_div.className='box';
                //Canvas上不能嵌套其他元素

                ctx.lineWidth = 20;
                ctx.lineCap = 'round';
                ctx.globalCompositeOperation = 'destination-out';
            } else {
                ctx.strokeStyle = color;
                ctx.lineWidth = Math.round(linewidth * scroll);//像素值取整
                ctx.lineCap = linecap;
                ctx.globalCompositeOperation = 'source-over';
            }
            ctx.beginPath();
            ctx.moveTo(posx, posy);

            oCanvas.onmousemove = function (ev) {
                var ev = ev || window.event;
                nowx = ev.clientX - oCanvas.offsetLeft;
                nowy = ev.clientY - oCanvas.offsetTop;

                ctx.lineTo(nowx, nowy);
                ctx.stroke();
            }

            document.onmouseup = function () {
                oCanvas.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
    else {
        alert('您的浏览器版本太低，请更新~');
    }

}

//进度条
function Progress() {
    var oFam = document.getElementById('progress')
    var oProgress = document.getElementById('linewidth')//进度条
    var olineMove = document.getElementById('linemove');

    var oText1 = document.getElementById('text1');

    var now = 5;//进度条初始值

    //像素值显示初始值
    oText1.value = Math.round(linewidth * scroll) + '像素';

    olineMove.style.left = now + 'px';
    olineMove.onmousedown = function (ev) {

        var ev = ev || window.event;
        var posX = ev.clientX - olineMove.offsetLeft;
        oFam.onmousemove = function (ev) {
            var ev = ev || window.event;
            nowX = ev.clientX - posX;
            if (nowX > oProgress.clientWidth - olineMove.offsetWidth) {
                nowX = oProgress.clientWidth - olineMove.offsetWidth;
            }
            else if (nowX < 0) {
                nowX = 0;
            }
            olineMove.style.left = nowX + 'px';

            //设置粗细进度
            scroll = nowX / 192;
            //设置粗细的像素值显示
            oText1.value = Math.round(linewidth * scroll) + '像素';
        }

        oFam.onmouseup = function () {
            oFam.onmousemove = null;
            oFam.onmouseup = null;
        }
    }

}

//设置样式
function setColor() {
    var oColors = document.getElementById('colors');
    var aSpan = oColors.getElementsByTagName('button');
    var oText_color = document.getElementById('text_color');

    var color_style = new Array;
    color_style = ['red', 'green', 'black', '#33FF33', '#33FFFF', '#99CCFF', '#FF00FF',
        '#FF0066', '#700000', '#CC0066', '#FF6600', 'FF9999', '#ee3f4d', '#5a1216',
        '#4f383e', '#ec2c64', '#0f59a4', '#fbda41', '#e2c027', '#5b4913', '#2775b6',
        '#101f30', '#346c9c', '#ccccd6', '#806d9e', '#681752', '#4e2a40', '#310f1b'];

    //设置颜色
    for (var i = 0; i < aSpan.length; i++) {
        aSpan[i].style.background = color_style[i];
    }
    //span动画
    for (var i = 0; i < aSpan.length; i++) {
        aSpan[i].index = i;
        //给strokeStyle赋值
        aSpan[i].onclick = function () {
            color = this.style.backgroundColor;

            // input:color只支持#开头16进制的色，background是RGB
            oText_color.style.background = this.style.background;
        }

    }
}
//选择pen
function choicePen() {
    //给像素笔加具体的笔
    var oPen_name = document.getElementById('pen_name');
    oPen_name.innerHTML = pen_name;
    var oPen = document.getElementById('pen');
    var aImg = oPen.getElementsByTagName('img');

    var oEraser = document.getElementById('eraser');
    //给图标加点击动画
    for (var i = 0; i < aImg.length; i++) {
        aImg[i].index = i;
        aImg[i].onclick = function () {
            //先清空
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].className = '';
                pen_name = '钢笔';
            }
            if (this.id == 'eraser') {
                flag = true;
                pen_name = '橡皮檫';
            } else {
                flag = false;
            }
            oPen_name.innerHTML = pen_name;
            this.className = 'pen_action';

        }
    }

}

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }
    else {
        return getComputedStyle(obj, false)[name];
    }
}